<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/WEB-INF/jspf/meta/meta.jspf" %>
    <title>Title</title>
    <%@include file="/WEB-INF/jspf/adminPage.jspf" %>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/sysPower/sysPower.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/_framework/jquery/jquery.serializejson.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/_framework/jquery/date.js"></script>
    <script>
        function append(){
            var t = $('#tree');
            var node = t.tree('getSelected');
            t.tree('append', {
                parent: (node?node.target:null),
                data: [{
                    text: 'new item1',
                    pid: node.id?node.id:null
                }]
            });
        }
        function appendRoot(){
            var t = $('#tree');
            t.tree('append', {
                data: [{
                    text: 'new item1',
                    pid: 0
                }]
            });
        }

        function removeit(){
            var node = $('#tree').tree('getSelected');
            $('#tree').tree('remove', node.target);
        }

        $(function () {
            $("#tree").tree(
                {
                    animate:true,
                    url:path_home+'/sysPower/findAllPower',
                    onClick : function(node) {
                        // 展开/折叠
                        if (node.state === 'open') {
                            $('#tree').tree('collapse', node.target);
                        } else {
                            $('#tree').tree('expand', node.target);
                        }
                        //清空详情框
                        $("#url").textbox("reset");
                        $("#code").textbox("reset");
                        $("#text").textbox("reset");

                        //如果不为父节点,
                        if (!node.children) {
                            $("#url").textbox("setValue",node.url);
                            $("#code").textbox("setValue",node.code);
                            $("#text").textbox("setValue",node.text);
                        }
                    },
                    onDblClick:function(node){
                        $(this).tree('beginEdit',node.target);
                    },
                    onContextMenu: function(e, node){
                        e.preventDefault();
                        // select the node
                        $('#tree').tree('select', node.target);
                        // display context menu
                        $('#mm').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    }
                }
            );


            $("#powerSave").click(function () {
                let treeList = $("#tree").tree("getRoots");
                //处理集合
                treeList =  trans(treeList);
                $.ajax({
                    url:path_home+'/sysPower/update',
                    data:{treeList: JSON.stringify(treeList)},
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        if(data.code>0){
                            //重新加载表单
                            $('#tree').tree('reload');
                        }
                    }
                })
            })
            $("#urlSave").click(function () {
                let node = $('#tree').tree('getSelected');
                if (node == null || node.children){
                    return;
                }
                node.url = $("#url").textbox("getValue");
                node.code = $("#code").textbox("getValue");
                node.text = $("#text").textbox("getValue");
                $.messager.alert('提示','保存成功','info');
            })
        })

        function trans(list) {
            list = list.map(({id,pid,text,children,url,code}) => ({id,pid,text,children,url,code}));
            list.forEach(function(value, index, arr){
                if (value.children) {
                    value.children = trans(value.children);
                }
            })
            return list;
        }

    </script>
</head>
<body>
    <body class="easyui-layout">
    <%--<div id="mm" class="easyui-menu" style="width:120px;">--%>
        <%--&lt;%&ndash;<div onclick="append()" data-options="iconCls:'icon-add'">添加节点</div>&ndash;%&gt;--%>
        <%--<div onclick="removeit()" data-options="iconCls:'icon-remove'">移除节点</div>--%>
        <%--<div onclick="appendRoot()" data-options="iconCls:'icon-add'">添加根节点</div>--%>
    <%--</div>--%>

        <div data-options="region:'center',title:'权限编辑'" style="padding:5px;">
            <ul  id="tree">
            </ul>
            <%--<a id="powerSave" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>--%>

        </div>
        <div data-options="region:'east',title:'权限详情',split:true" style="width:30%;padding:5px;">
            <p>&nbsp;&nbsp;&nbsp;
                <input id="url" class="easyui-textbox" data-options="label:'url:'" style="width:400px;padding: 10px;">
            </p>
            <p>&nbsp;&nbsp;&nbsp;
                <input id="code" class="easyui-textbox" style="width:400px;padding: 10px;" data-options="label:'权限代码:'">
            </p>
            <p>&nbsp;&nbsp;&nbsp;
                <input id="text" class="easyui-textbox" style="width:400px;padding: 10px;" data-options="label:'权限名称:'">
            </p>
            <p>&nbsp;&nbsp;&nbsp;<a id="urlSave" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a></p>
        </div>
    </body>
</body>
</html>